<!-- 年规 - 业绩 - 新增/编辑 -->
<template>
  <view>
    <view class="pb-25">
      <view class="px-4 mt-3">
        <!--年度目标-->
        <view class="card-style relative">
          <image class="absolute right-0 bottom-0 w-208 h-194" src="/static/images/common/img_plan_money.jpg"></image>
          <view class="flex-1 flex items-center">
            <view class="c-#333 text-40 font-600 mr-4">年度目标</view>
            <view class="w-300 px-3.5 py-2 bg-#f6f6f6 rounded-lg">
              <u-input v-model="state.targetAmount" placeholder="请输入"
                :custom-style="{ fontSize: '40rpx', fontWeight: 600 }" />
            </view>
            <view class="c-#333 text-40 ml-4">W</view>
          </view>
          <view class="flex-shrink-0 mt-5">
            <u-radio-group v-model="state.currency" icon-size="24" width="170rpx" @change="radioGroupChange">
              <u-radio active-color="#f4af22" v-for="(item, index) in radioList" :key="index" :name="item.value">
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </view>
      </view>
      <!--员工业绩目标-->
      <view class="mt-8 px-4">
        <view class="flex items-center mb-4">
          <view class=" flex-1 c-#333 text-40 font-600">员工业绩目标</view>
          <view class="flex-shrink-0 flex items-center" @click="onMemberSelect">
            <image class="w-28 h-28" src="/static/images/common/ic_plan_add.jpg" />
            <view class="c-#f4af22 text-28 ml-2">添加员工</view>
          </view>
        </view>
        <view v-for="(item, index) in state.list" :key="index" class="flex items-center item-style mt-3">
          <u-image :src="item.user?.avatar" width="80" height="80" border-radius="50%" />
          <view class="c-#333 text-28 ml-3">{{ item.user?.nickname || '' }}</view>
          <view class="flex-1 flex justify-end items-center">
            <view class="w-300 px-3 bg-#f6f6f6 rounded-lg">
              <u-input v-model="item.annual_target" placeholder="请输入员工业绩目标" :custom-style="{ fontSize: '28rpx' }"
                type="digit" />
            </view>
            <view class="c-#333 text-40 ml-2">W</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-wrap-16 w-full bg-#fff border-top px-4">
      <view class="button-save" @click="onSave">保存</view>
    </view>
  </view>
</template>
<script setup>
import { navigate, showToast } from '@/common/util/uni';
import { getTargetDetail, postTargetAdd, postTargetUpdate } from '@/common/http/module/plan'
import { numFormat } from '@/common/util/format';

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const state = reactive({
  detailData: '',
  targetAmount: 0,
  currency: 0,
  list: [],
});
const radioList = [
  { name: '人民币', value: 0 },
  { name: '美金', value: 1 }
]

function onSave() {
  const params = {
    year: planStore.year,
    club_id: userStore.currentSocietyId,
    currency: state.currency,
    annual_target: state.targetAmount,
    employee: state.list.map(item => {
      return {
        id: item.id,
        user_id: item.user_id,
        annual_target: item.annual_target
      }
    })
  }
  console.log(params, "lmlm")
  let total_target = 0
  params.employee.map((item) => {
    total_target += Number(item.annual_target)
  })
  if (total_target > params.annual_target) {
    showToast('员工业绩总和已经超过年度目标，请重新审查')
    return
  }
  if (state.detailData) {
    params.target_id = state.detailData.id
  }
  const func = state.detailData ? postTargetUpdate : postTargetAdd
  func(params).then(() => {
    showToast('保存成功')
    planStore.loadTarget()
    setTimeout(() => {
      uni.navigateBack()
    }, 600)
  })
}

function loadDetailData() {
  getTargetDetail(userStore.currentSocietyId, planStore.year).then(res => {
    state.detailData = res.data
    backFillForm(res.data)
  })
}

function backFillForm(data) {
  if (!data) return
  state.targetAmount = numFormat(data.annual_target || 0)
  state.currency = data.currency
  state.list = data.employee?.map(item => {
    return {
      ...item,
      annual_target: numFormat(item.annual_target || 0)
    }
  })
}

function onMemberSelect() {
  const ids = state.list.map(item => item.user_id).join(',')
  navigate(`/package_plan/pages/user/select?ids=${encodeURIComponent(ids)}`)
}

function onMemberChange(list) {
  const tmp = list.map(item => {
    return {
      id: state.detailData?.employee.find(user => user.user_id == item.user_id)?.id,
      club_id: item.club_id,
      user_id: item.user_id,
      target_id: state.loadDetailData?.id,
      user: item.user,
      annual_target: state.list.find(user => user.user_id == item.user_id)?.annual_target
    }
  })
  console.log('onMemberChange', tmp);
  state.list = tmp
}

onLoad(() => loadDetailData())

defineExpose({ onMemberChange })
</script>

<style lang="scss" scoped>
.bg-home {
  height: 100vh;
  background-color: #f6f6f6;
}

.card-style {
  padding: 30rpx 40rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.item-style {
  padding: 20rpx 24rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.button-save {
  height: 68rpx;
  border-radius: 5px;
  background-color: #F4AF22;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28rpx;
}
</style>
